<template>
    <view class="warehouse-filter">
        <view class="list-filter-container">
            <!-- 时间筛选器 -->
            <view class="filter-picker" @click="openDatePopup">
                <text class="picker-label">{{ selectedTime || '时间' }}</text>
                <text class="picker-arrow">
                    <roc-icon-plus
                        type="fas"
                        name="angle-down"
                        :size="16"
                        color="#2E6140"></roc-icon-plus>
                </text>
            </view>
            
            <!-- 农业资类型筛选器 -->
            <picker
                mode="selector"
                :range="agriculturalTypeOptions"
                range-key="name"
                @change="onAgriculturalTypeChange">
                <view class="filter-picker">
                    <text class="picker-label">
                        {{ selectedAgriculturalType?.name || typeLabel }}
                    </text>
                    <text class="picker-arrow">
                        <roc-icon-plus
                            type="fas"
                            name="angle-down"
                            :size="16"
                            color="#2E6140"></roc-icon-plus>
                    </text>
                </view>
            </picker>
        </view>

        <!-- 日期选择弹出层 -->
        <uni-popup ref="datePopup" type="center">
            <view class="popup-content">
                <view class="popup-title">选择日期范围</view>
                <view class="date-picker-container">
                    <view class="date-item">
                        <text>开始日期：</text>
                        <picker
                            mode="date"
                            :value="tempStartDate || startDate"
                            @change="onStartDateChange">
                            <view class="picker-value">
                                {{ tempStartDate || startDate || '请选择' }}
                            </view>
                        </picker>
                    </view>
                    <view class="date-item">
                        <text>结束日期：</text>
                        <picker
                            mode="date"
                            :value="tempEndDate || endDate"
                            :start="tempStartDate || startDate"
                            @change="onEndDateChange">
                            <view class="picker-value">
                                {{ tempEndDate || endDate || '请选择' }}
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="popup-buttons">
                    <button class="btn cancel" @click="cancelDatePicker">取消</button>
                    <button class="btn confirm" @click="confirmDatePicker">确定</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'WarehouseFilter',
    props: {
        // 类型选项标签，默认为"农业资类型"
        typeLabel: {
            type: String,
            default: '农业资类型'
        },
        // 字典类型，用于加载不同的类型选项
        dictType: {
            type: String,
            default: 'category'
        },
        // 默认类型选项，当字典加载失败时使用
        defaultTypeOptions: {
            type: Array,
            default: () => [
                { id: '1', name: '--' },
            ]
        }
    },
    data() {
        return {
            selectedTime: '',
            selectedAgriculturalType: '',
            agriculturalTypeOptions: [],
            startDate: '',
            endDate: '',
            tempStartDate: '',
            tempEndDate: '',
        }
    },
    computed: {
        ...mapGetters(['getDictByType']),
    },
    mounted() {
        this.loadTypeOptions()
    },
    methods: {
        // 加载类型选项
        async loadTypeOptions() {
            try {
                await this.getDictByType(this.dictType)
                const dictList = this.getDictByType(this.dictType)
                console.log('加载类型选项11')
                console.log(dictList)
                this.agriculturalTypeOptions = dictList.map((item) => {
                    return {
                        name: item.label,
                        id: item.value,
                    }
                })
                
                // 如果字典数据为空，使用默认数据
                if (this.agriculturalTypeOptions.length === 0) {
                    this.agriculturalTypeOptions = this.defaultTypeOptions
                }
            } catch (error) {
                console.error('加载类型选项失败:', error)
                // 使用默认数据
                this.agriculturalTypeOptions = this.defaultTypeOptions
            }
        },

        // 农业资类型选择变化
        onAgriculturalTypeChange(e) {
            const index = e.detail.value
            this.selectedAgriculturalType = this.agriculturalTypeOptions[index]
            this.emitFilterChange()
        },

        // 开始日期变化
        onStartDateChange(e) {
            this.tempStartDate = e.detail.value
            if (this.tempEndDate && this.tempEndDate < this.tempStartDate) {
                this.tempEndDate = ''
            }
        },

        // 结束日期变化
        onEndDateChange(e) {
            this.tempEndDate = e.detail.value
            if (this.tempStartDate && this.tempEndDate < this.tempStartDate) {
                uni.showToast({
                    title: '结束日期不能早于开始日期',
                    icon: 'none',
                })
                this.tempEndDate = this.tempStartDate
            }
        },

        // 确认日期选择
        confirmDatePicker() {
            if (this.tempStartDate && this.tempEndDate) {
                if (this.tempEndDate < this.tempStartDate) {
                    uni.showToast({
                        title: '结束日期不能早于开始日期',
                        icon: 'none',
                    })
                    return
                }
                this.startDate = this.tempStartDate
                this.endDate = this.tempEndDate
                this.selectedTime = `${this.startDate} 至 ${this.endDate}`
                this.$refs.datePopup.close()
                this.emitFilterChange()
            } else {
                uni.showToast({
                    title: '请选择开始和结束日期',
                    icon: 'none',
                })
            }
        },

        // 取消日期选择
        cancelDatePicker() {
            this.tempStartDate = this.startDate
            this.tempEndDate = this.endDate
            this.$refs.datePopup.close()
        },

        // 打开日期选择弹窗
        openDatePopup() {
            this.$refs.datePopup.open()
        },

        // 发送筛选变化事件
        emitFilterChange() {
            const filterData = {
                startDate: this.startDate,
                endDate: this.endDate,
                selectedType: this.selectedAgriculturalType,
                typeId: this.selectedAgriculturalType?.id || '',
            }
            this.$emit('filter-change', filterData)
        },

        // 重置筛选条件
        resetFilter() {
            this.selectedTime = ''
            this.selectedAgriculturalType = ''
            this.startDate = ''
            this.endDate = ''
            this.tempStartDate = ''
            this.tempEndDate = ''
            this.emitFilterChange()
        },

        // 获取当前筛选条件
        getFilterData() {
            return {
                startDate: this.startDate,
                endDate: this.endDate,
                selectedType: this.selectedAgriculturalType,
                typeId: this.selectedAgriculturalType?.id || '',
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.warehouse-filter {
    background-color: #fff;
}

.list-filter-container {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;
}

.filter-picker {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 5px;
    padding: 10px 12px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    position: relative;
    min-width: 0;
    box-sizing: border-box;
}

.picker-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.picker-arrow {
    margin-left: 8px;
    font-size: 13px;
    color: #999;
}

.popup-content {
    width: 600rpx;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
}

.popup-title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.date-picker-container {
    margin-bottom: 20px;
}

.date-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.picker-value {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    width: 300rpx;
}

.popup-buttons {
    display: flex;
    justify-content: space-between;
}

.btn {
    flex: 1;
    margin: 0 5px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
}

.cancel {
    background-color: #f5f5f5;
    color: #333;
}

.confirm {
    background-color: #2e6140;
    color: #fff;
}
</style>
